<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            background: red;
            padding: 10px;
        }
        
        .box {
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        123
        <div class="box">
            <div class="wrap">
                原来的内容,开启attachShadow后，不在显示
            </div>
        </div>
    </div>
    <script>
        window.addEventListener("DOMContentLoaded", function() {
            var box = document.querySelector(".box");
            //开启沙箱模式
            /**
             *   mode 参数:
             *    open控制显示
             *    closed控制不显示
             * attachShadow 函数不能多次调用，
             * **/

            box.attachShadow({
                mode: 'open'
            });
            var shadow = box.shadowRoot;
            var gloal = "gloal";

            //样色隔离   DEMO1============================================
            var style = document.createElement("style");
            var innerH = `
              .wrap{
                background:green;
                width:200px;
                height:200px;
              }
            `;
            style.innerHTML = innerH;
            shadow.appendChild(style);
            var wrapShadowBox = document.createElement("div");
            wrapShadowBox.className = "wrap";
            shadow.appendChild(wrapShadowBox);
            //样色隔离   DEMO2============================================
            var style2 = document.createElement("link");
            style2.setAttribute("href", "shadow.css");
            style2.setAttribute("rel", "stylesheet");
            shadow.appendChild(style2);

            //a标签===========
            var aLabel = document.createElement("a");
            aLabel.setAttribute("href", "https://developer.mozilla.org/zh-CN/docs/Web/API/Element/attachShadow");
            aLabel.innerHTML = "aLink"
            shadow.appendChild(aLabel);

            ///js隔离demo=========无效
            var scriptShadowBox = document.createElement("script");
            scriptShadowBox.innerHTML = `
               console.log("scriptShadow document",document.querySelector(".wrap"),"shadow",document.querySelector(".box").shadowRoot.querySelector(".wrap"));
               window.aaaaaaaaaaaaaaaaaa="100";
               bbb=200;
               console.log("隔离 window.aaaaaaaaaaaaaaaaaa", window.aaaaaaaaaaaaaaaaaa,'bbb',bbb)
            `;
            shadow.appendChild(scriptShadowBox);
            console.log("非隔离 window.aaaaaaaaaaaaaaaaaa", window.aaaaaaaaaaaaaaaaaa, 'bbb', bbb);

        })
    </script>
</body>

</html>